<template>
    <div>
    	<div class="ui-flex" style="margin-bottom: 20px; padding: 20px; background-color: #ebebeb;">
    		<div class="ui-flex-full" style="line-height: 22px;">
    			<p>为提示用户购物体验，建议开启短信推送，短信推送需要单独购买短信套餐包，按需购买按需使用，发送日志请到 <a>小折短信控制台</a> 查看</p>
				<p>开启短信推送后，需设置您的短信签名，短信签名会在发送短信时标注您的店铺信息，建议设置为店铺品牌，如 [小折]</p>
    		</div>
    		<div style="padding-left: 20px;">
    			<iSwitch :value="configure.sms_push" size="large" true-value="1" false-value="0">
					<span slot="open">开启</span>
					<span slot="close">关闭</span>
				</iSwitch>
    		</div>
    	</div>
    	<div class="ivu-table-wrapper">
            <div class="ivu-table">
                <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
                	<colgroup>
	    				<col width="260" />
	    				<col />
	    				<col width="180" />
	    			</colgroup>
                    <thead>
                        <tr>
                            <th>
                                <div class="ivu-table-cell">短信信息</div>
                            </th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="ivu-table-cell">剩余短信条数：{{ configure.sms_count }}</div>
                            </td>
                            <td>
                                <div class="ivu-table-cell">短信签名：{{ configure.sms_sign }}</div>
                            </td>
                            <td>
                                <div class="ivu-table-cell">
                                    <Button size="small" type="warning">充值短信</Button>
                                    <Button size="small" type="primary" style="margin-left: 10px;" @click="handleShowConfigModal">配置签名</Button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
    	<div style="margin-top: 20px;">
    		<Table :columns="columns" :data="datas">
    			<template slot-scope="{ row }" slot="action">
    				<iSwitch :value="row.status" :loading="row.loading" size="large" :true-value="1" :false-value="-1" @on-change="handleChangeStatus($event, row)">
						<span slot="open">开启</span>
						<span slot="close">关闭</span>
					</iSwitch>
    			</template>
    		</Table>
    	</div>
    	
        <DrawerForm
        	title="签名配置"
        	v-model="showConfigModal"
        	ok-text="保存"
        	@on-ok="handleSubmitConfig"
        >
        	<Form :model="formData" label-position="top">
                <FormItem label="短信签名">
                    <Input v-model="formData.name" :maxlength="12" placeholder="请设置短信签名如：小折" />
                </FormItem>
            </Form>
            <div class="sms-template">
            	<div class="content">【{{ formData.name }}】短信内容根据不同的场景发送 对应的短信模板。</div>
            </div>
        </DrawerForm>
        
    </div>
</template>
<script>
import Util from '@/libs/util.js';
import DrawerForm from '@/components/DrawerForm.vue';
export default {
    components: {
        DrawerForm
    },
    data() {
        return {
            showConfigModal: false, //订单运费模板显示绑定
            formData : {
                name : 0
            },
            datas: [],
            columns: [
            	{
            		title: '短信模板名称',
            		key: 'name',
            		width: 200
            	},
            	/*{
            		title: '发送对象',
            		key: 'target',
            		width: 180
            	},*/
            	{
            		title: '短信模板内容',
            		key: 'content'
            	},
            	{
            		title: ' ',
            		slot: 'action',
            		width: 90
            	}
            ]
        }
    },
    computed: {
		configure() {
			return this.$store.state.config.configure;
		}
	},
    mounted() {
    	this.init();
    },
    methods: {
    	init() {
    		// 获取短信模板列表
    		Util.ajax.post(this.API['API_SETTING_SMS_LISTS'], {}).then((res) => {
    			this.datas = res.map(item => {
    				if(item.status == 0) {
    					item.status = -1;
    				}
    				return item;
    			});
    		}).catch(() => {
    			
    		})
    	},
    	// 开启与关闭模板
    	handleChangeStatus(status, row) {
    		this.datas = this.datas.map(item => {
    			if(item.id == row.id) {
    				item.loading = true;
    			}
    			return item;
    		})
    		Util.ajax.post(this.API['API_SETTING_SMS_STATUS'], {id: row.id, status: status}).then(res => {
    			this.datas = this.datas.map(item => {
	    			if(item.id == row.id) {
	    				item.loading = false;
	    				item.status = 1;
	    			}
	    			return item;
	    		})
    			this.$Message.success('操作成功');
    		}).catch(() => {
    			this.datas = this.datas.map(item => {
	    			if(item.id == row.id) {
	    				item.loading = false;
	    				item.status = -1;
	    			}
	    			return item;
	    		})
    		})
    	},
    	handleShowConfigModal() {
    		this.formData.name = this.configure.sms_sign;
    		this.showConfigModal = true;
    	},
        // 保存配置
        handleSubmitConfig() {
        	let params = {
        		sms_sign: this.formData.name
        	}
        	Util.ajax.post(this.API['API_SETTING_SAVE'], {data: params}).then(res => {
        		this.$Message.success('修改签名成功');
        		let configure = this.configure;
        		configure.sms_sign = this.formData.name;
        		this.$store.commit('setSystemConfig', configure);
        		this.showConfigModal = false;
        	}).catch(() => {
        		
        	})
        }
    }
}
</script>

<style>
.sms-template {
	position: relative;
	margin: 0 auto;
	width: 281px;
	height: 560px;
	background: url(../../../../images/sms-bg.png) no-repeat center;
}
.sms-template .content {
	position: absolute;
	top: 225px;
	left: 38px;
	width: 210px;
	font-size: 12px;
	line-height: 14px;
}
</style>